<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //鼠标小尾巴的效果
        
        window.onload = function () {
            let oDiv1 = document.getElementById('div1');
            let aDiv = oDiv1.children;      //获取div1下的子节点

            document.onmousemove = function (ev) {

                //让一群div分别追随鼠标要分2个部分
                //第一个div直接追随鼠标位置
                let position = getPosition(ev);
                if (aDiv[0].style.display !== 'block') aDiv[0].style.display = 'block'; //一开始div是隐藏的
                aDiv[0].style.left = parseInt(position.x) +'px';    //需要添加px
                aDiv[0].style.top = parseInt(position.y) +'px';

                //其余的div倒序获取前一个的div的位置
                //正序不可以,因为要产生时差效果,正序会导致都在追随0号div
                for (let i = aDiv.length -1; i > 0; i--) {
                    let oDiv = aDiv[i];
                    if (oDiv.style.left !== '' && oDiv.style.left !== '0px' && oDiv.style.display !== 'block') oDiv.style.display = 'block';
                    oDiv.style.left = parseInt(aDiv[i-1].offsetLeft ) + 'px';
                    oDiv.style.top = parseInt(aDiv[i-1].offsetTop) + 'px';
                }
            };
        };

        //获取当前鼠标的坐标(框架),返回json
        function getPosition(ev) {
            return {
                x : document.documentElement.scrollLeft + ev.clientX + 'px',
                y : document.documentElement.scrollTop + ev.clientY + 'px'
            };
        }

    </script>

    <style>
        /* div1并不会被渲染 */
        #div1 div {
            height: 20px;
            width: 20px;
            background: salmon;
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>

<div id="div1">

    <div>啦</div>
    <div>嘛</div>
    <div>干</div>
    <div>快</div>
    <div>么</div>
    <div>这</div>
    <div>动</div>
    <div>你</div>

</div>

</body>
</html>